<template>
	<view>
<!--    配件卡片 -->
    <view v-if="info.type === 'accessory' || info.type === 'accessoryOrder'"  class="accessory-box" :class="isMsg ? 'wrapper' : 'wrapper-msg'">
      <view class="item">
        <view class="left" v-if='info.imgSrc'>
          <image :src="info.imgSrc" mode="aspectFit" :class="isMsg ? 'img' :'img-msg'"></image>
        </view>
        <view class="left"> 车型：</view>
        <view class="right">
          <view class="name">{{info.name}}</view>
        </view>
      </view>
      <view class="item pt-25">
        <view class="left">
          需求配件：
        </view>
        <view class="right felx">
          <view class="name-detail">
            {{info.carPartDetailsStr}}
          </view>
          <view class='btn' v-if='isMsg' @click="sendCardMsg">发送</view>
        </view>
      </view>
    </view>
<!--    寻车-->
    <view v-else-if="info.type === 'findCar'" class="box findcar-box" :class="isMsg ? 'wrapper' : 'wrapper-msg'">
      <view class="left-img" v-if='info.imgSrc'>
        <image :src="info.imgSrc" mode="aspectFit" class='img'></image>
      </view>
      <view class="right">
        <view class="name">{{info.name}}</view>
        <view class="info">
          <view class="price-box">报价:<text class="price">￥{{info.price}}</text></view>
          <view class='label-price' v-if='isMsg && info.imgSrc'>指导价:{{info.labelPrige}}</view>
        </view>
        <view class="btn-wrap">
          <view class='btn' v-if='isMsg' @click="sendCardMsg">发送</view>
        </view>

      </view>
    </view>
<!--    车品-->
    <view v-else-if="info.type === 'carGoods'" class="box" :class="isMsg ? 'wrapper' : 'wrapper-msg'">
      <view class="left-img" v-if='info.imgSrc'>
        <image :src="info.imgSrc" mode="aspectFit" class='img'></image>
      </view>
      <view class="right">
        <view class="name">{{info.name}}</view>
        <view class="info">
          <view class="price">￥{{info.price}}</view>
          <view class='btn' v-if='isMsg' @click="sendCardMsg">发送</view>
        </view>
      </view>
    </view>
<!--    车型和订单-->
    <view v-else class="box" :class="isMsg ? 'wrapper' : 'wrapper-msg'">
      <view class="left-img" v-if='info.imgSrc'>
        <image :src="info.imgSrc" mode="aspectFit" class='img'></image>
      </view>
      <view class="right">
        <view class="name">{{info.name}}</view>
        <view class="info">
          <view class="price">￥{{info.price}}
            <view class='label-price' v-if='isMsg && info.imgSrc'>指导价:{{info.labelPrige}}</view>
          </view>
          <view class='btn' v-if='isMsg' @click="sendCardMsg">发送</view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
				
			}
		},
		props: {
			isMsg: { //是否显示为卡片
				type: Boolean,
				default: false,
			},
			info: {
				type: Object,
				default(){
					return {
						imgSrc: '',
						name: '',
						price: '0.00',
						labelPrige: '0.00',
            type: 'orderInfo',
					}
				}
			},
		},
		methods: {
			sendCardMsg(){
				this.$emit('sendCard')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 700rpx;
    padding: 30rpx;
		
		.left-img {
			width: 156rpx;
			height: 146rpx;
			padding-right: 10rpx;
			
			.img {
				width: 146rpx;
				height: 146rpx;
			}
		}
	}

  .wrapper-msg{
    width: 350rpx;
    padding: 10rpx;

    .left-img {
      width: 73rpx;
      height: 73rpx;

      .img {
        width: 73rpx;
        height: 73rpx;
      }
    }
    .right{
      .info {
        .price-box {
          .price{
            font-size: 26rpx;
          }
        }
        .price{
          font-size: 26rpx;
        }
      }
    }
  }

	.box {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		
		.right {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;
			
			.name {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
			}
			
			.info{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
        padding-top: 20rpx;
				
				.price {
					font-size: 34rpx;
					color: #EB5C02;
					font-weight: bold;
				}
				
				.label-price {
					font-size: 24rpx;
					color: #999;
					font-weight: 500;
					padding-left: 20rpx;
					flex: 1;
				}

        .info-item {
          font-size: 24rpx;
          color: #333;
          font-weight: 500;
          flex: 1;
        }
				
				.btn {
					width: 140rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					border-radius: 28rpx;
					background: linear-gradient(-90deg, #FDD421, #FFE23E);
					color: #333;
					font-weight: 28rpx;
					font-weight: 500;
				}
			}
			
		}
		
	}

  .accessory-box {
    padding: 30rpx;
    background-color: #fff;

    .pt-25 {
      padding-top: 25rpx;
    }

    .item {
      display: flex;

      .left {
        color: #999;
        font-size: 26rpx;
        //text-align: right;


        .img {
          width: 56rpx;
          height: 56rpx;
        }

        .img-msg {
          width: 24rpx;
          height: 24rpx;
        }
      }

      .right {
        flex: 1;
        display: flex;
        overflow: hidden;

        .name {
          font-size: 28rpx;
          color: #333;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
          white-space: normal !important;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .name-detail {
          flex: 1;
          font-size: 28rpx;
          color: #333;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .btn {
          width: 140rpx;
          height: 56rpx;
          line-height: 56rpx;
          text-align: center;
          border-radius: 28rpx;
          background: linear-gradient(-90deg, #FDD421, #FFE23E);
          color: #333;
          font-weight: 28rpx;
          font-weight: 500;
        }
      }
    }
  }

  .findcar-box {

    .info{
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .price-box {
      font-size: 24rpx;
      color: #999;
    }



    .btn-wrap{
      display: flex;
      flex-direction: row-reverse;
      padding-top: 10rpx;
    }

    .btn {
      width: 140rpx;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      border-radius: 28rpx;
      background: linear-gradient(-90deg, #FDD421, #FFE23E);
      color: #333;
      font-weight: 28rpx;
      font-weight: 500;
    }
  }


</style>
